<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 列表 -->
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          <div class="inputItem">
            <div class="title">邀请人姓名</div>
            <div class="inputBox">
              <el-input v-model="inviter" @keyup.enter.native="getList(1)" >
              </el-input>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">邀请人电话</div>
            <div class="inputBox">
              <el-input v-model="phone" @keyup.enter.native="getList(1)" >
              </el-input>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">导出时间范围</div>
            <el-date-picker v-model="createTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <!-- 查询 -->
          <el-button type="primary" size="small" icon="el-icon-search" @click="getList(1)">查询</el-button>
          <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        </div>
        <div class="main_head_right">
          <!-- <button class="addCargoOwner" @click="showAddAddress()">
						<i class="el-icon-plus iconBtn"></i>
						<span>新增</span>
					</button> -->
          <!-- <button class="addCargoOwner" @click="Download">
						下载地址簿模板
					</button> -->
          <el-button class="addCargoOwner" @click="exportDown" :loading="exportLoading">
            导出佣金数据统计
          </el-button>
          <!-- <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
						:show-file-list="false" accept=".xlsx,.xls" >
						<el-button class="addCargoOwner">导入地址簿</el-button>
					</el-upload> -->
        </div>
      </div>

      <div class="list">
        <el-table :data="records" style="width: 100%" header-align="left">
          <el-table-column align="left" width="70" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + (pageIndex - 1) * 15 }}
            </template>
          </el-table-column>
          <el-table-column align="left" prop="role" label="角色">
          </el-table-column>
          <el-table-column align="left" prop="name" label="邀请人姓名">
            <template slot-scope="scope">
              <div style="cursor: pointer;color:#1890ff" @click="$router.push({path:'/BasicSettings/promotionCenter',query:{keyWord:scope.row.name}})">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="phone" label="邀请人电话">
          </el-table-column>
          <el-table-column align="left" prop="money" label="佣金金额">
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox">
        <div class="paginationtext">
          <span>佣金总和：{{ sum }}</span>
        </div>
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :current-page.sync="pageIndex" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import {
  workbook2blob,
  openDownloadDialog,
} from "@/common/blobAndOpenDownload.js";
import XLSX from "xlsx";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
// import exportFromJSON from 'export-from-json'

export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      records: [],
      createTime: [],
      pageIndex: 1,
      pageSize: 15,
      data: {
        total: "",
        size: "",
      },
      inviter: '',
      phone: '',
      exportLoading: false,
      exportList: [],
      sum: 0,
    };
  },
  methods: {
    async getList(current) {
      let params = {
        current: current || this.pageIndex,
        size: this.pageSize,
        name: this.inviter,
        phone: this.phone,
        // money:this.money,
        // startTime: this.createTime != null ? this.createTime[0] : "", //开始时间
        // endTime: this.createTime != null ? this.createTime[1] : "", //结束时间
      }
      let res = await httpApi.basicSettingApi.brokerageStatistics(params)
      this.records = res.data.data.records
      this.data=res.data.data
      this.getSum()
    },

    async getSum() {
      let params = {
        startTime: this.createTime != null ? this.createTime[0] : "", //开始时间
        endTime: this.createTime != null ? this.createTime[1] : "", //结束时间
      }
      let res = await httpApi.basicSettingApi.querySummaryCoreCommission(params)
      if (res.data.code == 200) {
        this.sum = res.data.msg
      }

    },
    CleanUp() {
      this.inviter = "";
      this.phone='',

      this.createTime = "";
      this.pageIndex = 1
      this.getList();
    },
    changePages(e) {
      this.pageIndex = e;
      this.getList();
    },
    // 导出佣金excel
    async exportDown() {
      let params = {
        startTime: this.createTime != null ? this.createTime[0] : "", //开始时间
        endTime: this.createTime != null ? this.createTime[1] : "", //结束时间
      }
      let res5 = await httpApi.basicSettingApi.queryExportCoreCommission(params)
      this.exportList = res5.data.data
      if (this.exportList.length == 0) {
        this.$message.warning('该时间范围内无佣金数据')
        return
      }

      this.exportLoading = true

      let cont = JSON.parse(JSON.stringify(this.exportList))
      const sheetData1 = cont.map((item, index) => ({
        '序号': index + 1,
        '邀请人姓名': item.name,
        '邀请人电话': item.phone,
        '佣金金额': item.money,
      }));
      let totalMoney=0
      cont.forEach(item=>{
        totalMoney=totalMoney+Number(item.money)
      })
      sheetData1.push({
        佣金金额: "佣金总金额：" + totalMoney,
      });
      const sheet1 = XLSX.utils.json_to_sheet(sheetData1);



      for (let key in sheet1) {
        // console.log(key);
        if (key != '!ref' && key != '!merges' && key != '!cols') {
          sheet1[key].s = {
            alignment: {
              horizontal: "center",
              vertAlign: "center"
            },
          }
        }
      }

      let cols = []; // 设置每列的宽度
      // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
      // console.log(sheetData1);
      let headCol = ['序号',
        '邀请人姓名',
        '邀请人电话',
        '佣金金额',
      ]

      for (let i = 0; i <= headCol.length; i++) {
        let col = {};
        col.wch = this.getCellWidth(headCol[i], sheetData1)
        cols.push(col)
      }
      sheet1['!cols'] = cols; // 设置列宽信息到工作表
      const wb = XLSX.utils.book_new(); // 初始化一个excel文件
      XLSX.utils.book_append_sheet(wb, sheet1, '佣金统计数据表');
      const workbookBlob = workbook2blob(wb);


      openDownloadDialog(workbookBlob, `佣金统计数据表.xlsx`);
      this.exportLoading = false

    },
    getCellWidth(value, sheetData) { //计算每列的需设置的宽度
      if (value == '序号') {
        return 10
      } else if (value == '邀请人姓名') {
        return 40
      } else if (value == '佣金金额') {
        return 40
      } else if (value == '邀请人电话') {
        return 40
      }
    },
  },
  created() {
    this.getList()
  },
  mounted() { },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.paginationtext {
  font-size: 12px;
  color: #1890ff;
}

.paginationtext span {
  margin-right: 10px;
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}

.main {
  width: 100%;

  height: calc(100vh - 127px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;
  // overflow-x: scroll;
  // min-width: 970px;

  .main_head {
    padding: 10px 0;

    .main_head_left {
      font-size: 12px;
      color: #262626;
      display: flex;

      .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
          color: #262626;
          font-size: 12px;
          margin-right: 7px;
        }

        >.inputBox {
          width: 160px;

          .select {
            ::v-deep .el-input__icon {
              line-height: 0;
            }
          }

          ::v-deep .el-input__inner {
            height: 32px;
            font-size: 12px;
          }

          ::v-deep .el-input__inner::placeholder {
            color: #c3c3c3;
            font-size: 12px;
          }
        }
      }
    }

    .main_head_right {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;

      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .list {
    height: calc(100% - 143px);

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 320px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}

.dialog {
  .link {
    color: #1890ff;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 15px;
    margin-left: 335px;
    display: inline-block;

    &:hover {
      opacity: 0.8;
    }
  }

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
    width: 100%;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>